<template>
    <div class="examine-map-box">
      <div class="examine-map-box-chart" ref="mapChart"></div>
    </div>
  </template>

  <script setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import bg from './map_bg.png';
  import mapJson from './map.js';
  import zg from './中华人民共和国.js';
  let mapChart = ref();
  const initMapChart = () => {
    let mapEcharts = echarts.init(mapChart.value);

    echarts.registerMap('YC', zg); //注册可用的地图
    console.log(echarts.getMap('YC')) 

    let geoList = [];
    let domImg = document.createElement('img');
    let imgHeight = mapChart.value.clientHeight;
    let imgWidth = mapChart.value.clientWidth;
    domImg.style.height = imgHeight + 'px';
    domImg.style.width = imgWidth + 'px';
    domImg.height = imgHeight;
    domImg.width = imgWidth;
    console.log(imgWidth);
    domImg.src = bg;
    for (let index = 0; index < 5; index++) {
      let itemStyle = {};
      itemStyle.normal = {
        areaColor: {
          image: domImg, //配置图片
          repeat: 'no-repeat', //可选值repeat、no-repeat、repeat-x、repeat-y
        },
        shadowColor: '#1330DF',
        shadowOffsetY: index * 1.5,
        shadowOffsetX: 0,
        borderColor: '#00E4FF',
        borderWidth: 0,
      };
      geoList.push({
        map: 'YC',
        roam: false,
        left: 89,
        top: 5,
        right: 50,
        bottom: 10,
        zoom: 1,
        // label: {
        //   show: false,
        //   color: '#ffffff',
        //   fontSize: 15,
        // },
        emphasis: {
          label: {
            show: false,
          },
        },
        itemStyle: itemStyle,
      });
    }
    let mapOption = {
      geo: [...geoList],
      series: [
        {
          type: `map`,
          map: `YC`,
          zoom: 1,
          left: 89,
          top: 5,
          right: 50,
          bottom: 10,
          roam: false,
          label: {
            show: true,
            color: '#ffffff',
            fontSize: 15,
          },
          itemStyle: {
            areaColor: {
              image: domImg, //配置图片
              repeat: 'no-repeat', //可选值repeat、no-repeat、repeat-x、repeat-y
            },
            borderColor: '#00E4FF',
            borderWidth: 2,
          },
          emphasis: {
            itemStyle: {
              areaColor: 'rgba(0, 228, 255, .3)',
            },
            label: {
              color: '#ffffff',
              fontSize: 15,
            },
          },
          select: {
            itemStyle: {
              areaColor: 'rgba(0, 228, 255, .3)',
            },
            label: {
              color: '#ffffff',
              fontSize: 15,
            },
          },
        },
      ],
    };
    mapEcharts.on('click', (params) => {
      console.log('mapClick', params);
    });
    domImg.onload = () => {
      mapEcharts.setOption(mapOption);
    };
    const resizeObserve = new ResizeObserver(() => onResize());
    resizeObserve.observe(mapChart.value);
  };
  const onResize = () => {
    let myChart = echarts.init(mapChart.value);
    myChart?.resize();
  };
  onMounted(() => {
    initMapChart();
  });
  </script>
      
  <style lang="less" scoped>
  .examine-map-box {
    width: 556px;
    height: 540px;
    left: 50%;
    bottom: 10px;
  
    .examine-map-box-chart {
      width: 556px;
      height: 540px;

      width: 800px;
      height: 540px;
    }
  }
  </style>